<template>
  <div class="statistics-card">
    <div class="header">
      <span>俱乐部数量</span>
    </div>
    <div class="content">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">单位/家</span>
          <span class="number">{{ number.toLocaleString() }}</span>
        </div>
      </div>
    </div>
    <div ref="barChart" class="chart" id="Chart2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getClubTypeData } from "@/api/statistics";
export default {
  data() {
    return {
      number: 20000,
      chart: null,
      chartData: [
        { category: "民办非企业", value: 60 },
        { category: "企业法人", value: 70 },
        { category: "社会团体", value: 50 },
        { category: "其他", value: 80 }
      ]
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    async drawChart() {
      let res = await getClubTypeData({ year: new Date().getFullYear() });
      this.number = res.data.number;
      this.chartData = res.data.list;
      this.chart = echarts.init(document.getElementById("Chart2"));
      const option = {
        grid: {
          top: 40,
          bottom: 40,
          left: 40,
          right: 20
        },
        xAxis: {
          type: "value",
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { lineStyle: { type: "dashed" } }
        },
        yAxis: {
          type: "category",
          data: this.chartData.map(item => item.category),
          axisLine: { show: false },
          axisTick: { show: false }
        },
        series: [
          {
            data: this.chartData.map(item => item.value),
            type: "bar",
            itemStyle: {
              color: "#409EFF",
              barBorderRadius: [0, 5, 5, 0]
            },
            barWidth: "50%",
            label: {
              show: true,
              position: "right",
              formatter: "{c}"
            }
          }
        ]
      };
      this.chart.setOption(option);
      // 监听父元素大小变化
      const ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          if (this.chart) {
            this.chart.resize();
          }
        }
      });
      ro.observe(Chart);
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>

<style scoped>
.statistics-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.content {
  margin-bottom: 20px;
}

.info {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  padding: 10px;
  border-radius: 4px;
}

.unit-line {
  display: inline-block;
  width: 4px;
  height: 40px;
  background-color: #409eff;
  margin-right: 8px;
}

.text {
  display: flex;
  flex-direction: column;
}

.unit {
  font-size: 14px;
  color: #999;
}

.number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.chart {
  width: 100%;
  height: 250px;
}
</style>
